<template>
	<view class="main">
		<view class="user-header">
			<view class="user-text">花呗回收</view>
		</view>
		<view style="margin-top: 66px;">
			<swiper class="swiper" :indicator-dots="true" indicator-active-color="rgba(255, 255, 255, 0.8)" :circular="true" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="img" :src="item.image || '/static/img/yijian_bann.png'"></image>
				</swiper-item>
			</swiper>
		</view>
		<view v-if="notice" class="notice-content">
			<uni-notice-bar :text="notice" :show-icon="true" :scrollable="true" :single="true" :showGetMore="true" style="background:none;"
			 @click="hanldNotice()" :color="color" :speed="50"></uni-notice-bar>
		</view>
		<view class="main-wrapper">
			<!-- <view class="stats-text">·一键<text style="color: #FF6001;">回收</text>
				<view class="st-line"></view>
			</view> -->
			<view class="main-body">
				<!--  -->
				<!-- <view class="main-item" @click="hanldAppoint(index)">
					<image :src="item.icon || '/static/img/feizhi.png'" class="type-img"></image>
					<view class="type-text">{{item.name}}</view>
				</view> -->
				<view style="display: flex;flex-direction: row;align-items: center;width: 100%;justify-content: space-between;flex-wrap: wrap;">
					<view v-for="(item,index) in garbagecateList"  @click="hanldAppoint(index)" :key="index" style="width: 50%;" >
						<image :src="item.icon || '../../static/img/fz.png'" style="width: 100% !important;height: auto" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="main-wrapper">
			<view class="stats-text">·回收<text style="color: #FF6001;">要求</text>
				<view class="st-line"></view>
			</view>
			<view class="main-body" style="justify-content: space-around;">
				<view class="main-item">
					<image src="/static/img/ganzao.png" class="type-img" style="border-radius: initial;width: 35px;height: 35px;"></image>
					<view class="type-text">保持干燥</view>
				</view>
				<view class="main-item">
					<image src="/static/img/zawu.png" class="type-img" style="border-radius: initial;width: 35px;height: 35px;"></image>
					<view class="type-text">拒绝参杂</view>
				</view>
				<view class="main-item">
					<image src="/static/img/yibaij.png" class="type-img" style="border-radius: initial;width: 35px;height: 35px;"></image>
					<view class="type-text">10公斤以上</view>
				</view>
			</view>
		</view> -->
		<!-- <view class="parter" @click="hanldZpartner()">
			<image src="/static/img/ziyuan_bann.jpg"></image>
		</view> -->
		
	

		<view class="main-wrapper">
			<view class="stats-text"><text class="linepice"></text> <text>回收要求</text>
			</view>
			<view class="main-body" style="justify-content: space-around;">
				<view class="main-item" >
					<image src="/static/img/lianxi.png" class="type-img" style="border-radius: initial;width: 46px;height: 46px;"></image>
					<view class="type-text">可回收物</view>
				</view>
				<view class="main-item" >
					<image src="/static/img/yaoqing.png" class="type-img" style="border-radius: initial;width: 46px;height: 46px;"></image>
					<view class="type-text">保持干燥</view>
				</view>
				<view class="main-item" >
					<image src="/static/img/fank.png" class="type-img" style="border-radius: initial;width: 46px;height: 46px;"></image>
					<view class="type-text">拒绝掺杂</view>
				</view>
			</view>
		<!-- 	<view @click="handlContact()" style="padding-top: 15px;">
				<button class="contact-btn">
					<image src="/static/img/kf11.png" style="vertical-align: middle;width: 24px;height: 24px;"></image>
					<text style="margin-left: 10px;vertical-align: middle;font-size: 16px;">联系我们</text>
				</button>
			</view> -->
		</view>
		
		<view class="parter" @click="hanldZpartner()">
			<swiper class="swiper-parter" :indicator-dots="showIndicatorDots" indicator-active-color="rgba(255, 255, 255, 0.8)" :circular="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in parterBannerList" :key="index">
					<image class="img" :src="item.image || '/static/img/yijian_bann.png'"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="explan">
			确认下单将自动默认同意<text style="color:#FF6001" @click="open()">《花呗上门回收免责声明》</text>
		</view>


		<!--退押金弹框-->
		<uni-popup ref="recash" type="bottom" style="z-index: 9999999999;">
			<view class="cash">
				<image @click="closePopup" src="/static/img/guanbi_icon.png" class="cash-guan"></image>

				<view style="padding: 27px;">
					<view class="cash-title">《花呗上门回收免责声明》</view>
					<scroll-view scroll-y show-scrollbar>
						<view class="cash-text-box">
							<view class="cash-text" v-html="detail.info"></view>
						</view>
					</scroll-view>
				</view>
				<view @click="closePopup" class="cash-but">已阅读</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'


	//
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		data() {
			return {
				color: "#4D4D4D",
				bannerList: [],
				notice: '',
				detail: '',
				garbagecateList:[],
				parterBannerList:[],
				info:{},
				showIndicatorDots:false,
			}
		},
		components: {
			uniNoticeBar,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
		},
		created() {
			console.log('created')

			if(uni.getStorageSync('notice')){
				this.notice = uni.getStorageSync('notice')
			}
			this.getNotice()
			this.getNews()
			if(uni.getStorageSync('bannerList')){
				this.bannerList = JSON.parse(uni.getStorageSync('bannerList'))
				this.parterBannerList = JSON.parse(uni.getStorageSync('parterBannerList'))
				if(this.parterBannerList.length>1){ //轮播图片大于一张 显示轮播点
					this.showIndicatorDots = true
				}
			}
			this.getBanner()
			
			if(uni.getStorageSync('garbagecateList')){
				this.garbagecateList = JSON.parse(uni.getStorageSync('garbagecateList'))
			}
			this.getGarbagecate()
			if(uni.getStorageSync('recyclingToken')){
				this.getInfo();
			}
			
		},
		methods: {
			//分类类别
			getGarbagecate() {
				this.$http.garbagecate().then(res => {
					if (res.data && res.data.length > 0) {
						this.garbagecateList = res.data
						uni.setStorageSync('garbagecateList',JSON.stringify(this.garbagecateList))
					}
				})
			},
			getNews() {
				this.$http.news({
					type: 2
				}).then(res => {
					if (res.data && res.data.data && res.data.data.length > 0) {
						this.detail = res.data.data[0]
					}
				})
			},
			getBanner() {
				this.$http.banner().then(res => {
					if(res.data && res.data.length>0){
						this.bannerList = res.data.filter(item => item.type == 1)
						this.parterBannerList = res.data.filter(item => item.type == 2)
						if(this.parterBannerList.length>1){
							this.showIndicatorDots = true
						}
						uni.setStorageSync('bannerList',JSON.stringify(this.bannerList))
						uni.setStorageSync('parterBannerList',JSON.stringify(this.parterBannerList))
					}
				})
			},
			getNotice() {
				this.$http.annou({
					type: 1
				}).then(res => {
					if (res.data) {
						if (res.data.data && res.data.data.length > 0) {
							this.notice = res.data.data[0].title
							uni.setStorageSync('notice',JSON.stringify(this.notice))
						}
					}
				})
			},
			open() {
				console.log('aa')
				this.$refs.recash.open()
			},
			closePopup() {
				this.$refs.recash.close()
			},
			//一键预约
			hanldAppoint(current) {
				uni.navigateTo({
					url: '/pages/index/appointment?current=' + current
				})
			},
			hanldNotice() {
				uni.navigateTo({
					url: '/pages/index/notice'
				})
			},
			//联系方式
			handlContact() {
				uni.navigateTo({
					url: '/pages/member/about'
				})
			},
			//邀请好友
			hanldShare() {
				uni.navigateTo({
					url: '/pages/member/share'
				})
			},
			//意见反馈
			hanldIdea() {
				uni.navigateTo({
					url: '/pages/member/idea'
				})
			},
			getInfo() {
				this.$http.info().then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			hanldZpartner() {
				// if (this.info.areaid > 0) {
				// 	uni.navigateTo({
				// 		url: "/pages/member/partner2"
				// 	})
				// } else {
					uni.navigateTo({
						url: "/pages/member/partner"
					})
				// }
				// uni.navigateTo({
				// 	url: '/pages/member/partner'
				// })
			}
			
		}
	}
</script>

<style scoped>
	.linepice{
		width: 24upx;height: 8upx;background: #2B2A29;border-radius: 8upx;display: block;margin-right: 5px;
	}
	.user-header {
		text-align: center;
		position: relative;
		height: 44px;
		font-size: 16px;
		color: #111110;
		font-weight: bold;
		line-height: 44px;
		position: fixed;
		width: 100%;
		background-color: #fff;
		/* padding-bottom: 100px; */
		z-index: 9999;
		top: 0;
		padding-top: 20px;
	}

	.main {
		background-color: #fff;
		min-height: 100%;
		margin-bottom: 100px;
	}

	.swiper {
		overflow: hidden;
	}

	.swiper .img {
		width: 100%;
		height: 193px;
		object-fit: cover;
	}
	
	.notice-content{
		margin: 10px 5%;
		width: 90%;
	}

	.main>>>.uni-noticebar__content-text--scrollable {
		color: #30344C !important;
	}
	
	.main >>> .uni-swiper-dot-active{
		background-color: #fff;
	}


	.main>>>.uni-noticebar-icon {
		color: #4D4D4D !important;
		font-size: 18px !important;
	}
	.main >>> .swiper{
		height: 193px !important;
	}
	.main >>> .swiper-parter{
		height: 109px !important;
	}
	.swiper-parter .img {
		height: 109px;
		width: 100%;
	}
	.stats-text {
		font-size: 17px;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.stats-num {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.main-wrapper {
		padding: 0px 18px 15px 18px;
		background-color: #FFFFFF;
	}

	.main-body {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: center;
		padding-top: 15px;
	}

	.type-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.type-text {
		color: #000000;
		font-weight: bold;
		font-size: 14px;
		padding: 5px 0;

	}

	.st-line {
		width: 132upx;
		height: 6upx;
		background: rgb(233, 241, 255);
		margin-left: 20upx;
	}

	.parter {
		background-color: #FFFFFF;
		margin-bottom: 10px;
	}

	.parter image {
		height: 109px;
		width: 100%;

	}

	.explan {
		color: #898989;
		font-weight: bold;
		text-align: center;
		margin: 15px 20px;
		padding: 10px 0 50px 0;
		border-top: 1px solid #f5f5f5;
	}

	/**/
	.cash {
		height: 778upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 25px 25px 0px 0;
	}
	.cash-title {
		color: #FF6001;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		padding-bottom: 22px;

	}
	.cash-but {
		width: 750upx;
		height: 96upx;
	
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		box-shadow: 0px 2upx 8upx 0px rgba(168, 170, 253, 1);
		border-radius: 48upx;
		text-align: center;
		font-size: 16px;
		line-height: 96upx;
		font-weight: bold;
		position: fixed;
		bottom: 0;
		color: #FFFFFF;
	}
	.cash-text-box {
		height: 500upx;
	}
	.cash-text {
		color: #161616;
		font-size: 13px;
	}
	.cash-guan {
		width: 46upx;
		height: 46upx;
		position: absolute;
		right: 40upx;
		top: 54upx;
	}
	.contact-btn{
	
	
	background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
	box-shadow: 0px 2px 4px 0px #FFAB71;
		color: #fff;
		border-radius: 20px;
		border: none !important;
	}
	.contact-btn:after{
		border: none;
	}
</style>
